<script lang="ts" setup>
import useScrollXCard from "../hooks/useScrollXCard";

defineOptions({
  name: "ScrollXCard"
});
const { list } = useScrollXCard();
</script>
<template>
  <div
    @touchstart.stop
    @touchmove.stop
    @touchend.stop
    @touchcancel.stop
    @scroll.stop
    @scroll.passive
    @scroll.prevent
    @scroll.self
    @click.stop
    class="flex flex-row justify-start items-stretch gap-x-10 overflow-x-auto w-full scroll-smooth touch-pan-x touch-pan-y"
    v-if="list.length"
  >
    <div
      v-for="(item, index) in list"
      :key="index"
      class="first-of-type:ml-14 last-of-type:mr-14"
    >
      <CardItem v-if="item.type === 1" :type="item.type">
        <p class="font-bold text-16 text-[#fff] lh-19 text-center not-italic">
          {{ item.title }}
        </p>
        <p class="font-600 text-14 text-[#fff] lh-16 text-center not-italic">
          {{ item.time }}
        </p>
      </CardItem>
      <CardItem v-if="item.type === 2" :type="item.type">
        <p class="font-400 text-14 text-[#FFE500] lh-16 text-center not-italic">
          {{ item.title }}
        </p>
        <p class="font-bold text-16 text-[#fff] lh-19 text-center not-italic">
          {{ item.cate }}
        </p>
        <p class="font-600 text-14 text-[#fff] lh-16 text-center not-italic">
          {{ item.time }}
        </p>
      </CardItem>
      <CardItem v-if="item.type === 3" :type="item.type">
        <p class="font-400 text-14 text-[#FFE500] lh-16 text-center not-italic">
          {{ item.title }}
        </p>
        <p class="font-bold text-16 text-[#fff] lh-19 text-center not-italic">
          {{ item.cate }}
        </p>
        <p class="font-600 text-14 text-[#fff] lh-16 text-center not-italic">
          {{ item.time }}
        </p>
        <p class="font-400 text-12 text-[#fff] lh-14 text-center not-italic">
          Time Start: {{ item.startTime }}
        </p>
      </CardItem>
      <CardItem v-if="item.type === 4" :type="item.type">
        <p class="font-bold text-16 text-[#fff] lh-19 text-center not-italic">
          {{ item.title }}
        </p>
        <p class="font-600 text-14 text-[#fff] lh-16 text-center not-italic">
          {{ item.time }}
        </p>
      </CardItem>
    </div>
    <!-- <CardItem type="1">
      <p class="font-bold text-16 text-[#fff] lh-19 text-center not-italic">
        Fajar
      </p>
      <p class="font-600 text-14 text-[#fff] lh-16 text-center not-italic">
        06:04:39 AM
      </p>
    </CardItem>
    <CardItem type="1">
      <p class="font-bold text-16 text-[#fff] lh-19 text-center not-italic">
        Sunrise
      </p>
      <p class="font-600 text-14 text-[#fff] lh-16 text-center not-italic">
        07:15:16 AM
      </p>
    </CardItem>
    <CardItem type="1">
      <p class="font-bold text-16 text-[#fff] lh-19 text-center not-italic">
        Dahwa-e-Kubra
      </p>
      <p class="font-600 text-14 text-[#fff] lh-16 text-center not-italic">
        12:42:43 PM
      </p>
    </CardItem>
    <CardItem type="1">
      <p class="font-bold text-16 text-[#fff] lh-19 text-center not-italic">
        Zuhr
      </p>
      <p class="font-600 text-14 text-[#fff] lh-16 text-center not-italic">
        01:17:46 PM
      </p>
    </CardItem>
    <CardItem type="1">
      <p class="font-bold text-16 text-[#fff] lh-19 text-center not-italic">
        Zuhr
      </p>
      <p class="font-600 text-14 text-[#fff] lh-16 text-center not-italic">
        01:17:46 PM
      </p>
    </CardItem>
    <CardItem type="2">
      <p class="font-400 text-14 text-[#FFE500] lh-16 text-center not-italic">
        Current Prayer
      </p>
      <p class="font-bold text-16 text-[#fff] lh-19 text-center not-italic">
        Asr
      </p>
      <p class="font-600 text-14 text-[#fff] lh-16 text-center not-italic">
        04:34:15 PM
      </p>
    </CardItem>
    <CardItem type="3">
      <p class="font-400 text-14 text-[#FFE500] lh-16 text-center not-italic">
        Upcoming Prayer
      </p>
      <p class="font-bold text-16 text-[#fff] lh-19 text-center not-italic">
        Maghrib
      </p>
      <p class="font-600 text-14 text-[#fff] lh-16 text-center not-italic">
        01:25:22
      </p>
      <p class="font-400 text-12 text-[#fff] lh-14 text-center not-italic">
        Time Start: 07:22:32 PM
      </p>
    </CardItem>
    <CardItem type="4">
      <p class="font-bold text-16 text-[#fff] lh-19 text-center not-italic">
        Isha
      </p>
      <p class="font-600 text-14 text-[#fff] lh-16 text-center not-italic">
        08:29:50 PM
      </p>
    </CardItem> -->
  </div>
</template>
